<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>插值分析</title>
    <link rel="stylesheet" href="/arcgis_js_api/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="/arcgis_js_api/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="css/waitImage.css" />
    <link rel="stylesheet" type="text/css" href="css/waitImageForMask.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <style>
        @import "/arcgis_js_api/dojox/grid/resources/claroGrid.css";

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        button {
            margin: 0 5px 5px 0;
        }

        .query {
            margin: 10px 0 10px 10px;
        }

        #borderContainer {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/Javascript" src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="jsPanel-3.10.0/vendor/jquery-ui-1.12.1.complete/jquery-ui.min.js"></script>
    <script type="text/Javascript" src="/arcgis_js_api/init.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
        <script type="text/javascript" src="js/ChaZhiFenXi.js"></script>
</head>

<body class="claro esri">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:false"
        id="borderContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'right'" style="width: 400px" id="rightContent">
            <div data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="liveSplitters:true" id="layoutPriorityBorderContainer">
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:6" style="width: 100%;">
                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                    <div id="loading" style="display: none;">
                        <div id="loading-center">
                            <div id="loading-center-absolute">
                                <div class="object" id="object_one"></div>
                                <div class="object" id="object_two"></div>
                                <div class="object" id="object_three"></div>
                                <div class="object" id="object_four"></div>
                                <div class="object" id="object_five"></div>
                                <div class="object" id="object_six"></div>
                                <div class="object" id="object_seven"></div>
                                <div class="object" id="object_eight"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:2" style="width: 100%;">
                    &#12288;&#12288;年份：
                    <select id="dataYears" style="width: 70%">
                        <option value="2017">2017</option>
                    </select>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:2" style="width: 100%;">
                    &#12288;&#12288;区县：
                    <select id="District" style="width: 70%">
                        <option value="440981">高州</option>
                    </select>
                </div>
                <!-- 
                0 DB
                地下水位    DXSW
                有效土层厚度  YXTCHD
                土壤有机质含量 TRYJZHL
                土壤酸碱度（pH值）  TRSJD
                灌溉保证率   GGBZL
                排水条件    PSTJ
                地表岩石露头度 DBYSLTD
                障碍层距地表深度    ZACJDBSD
                盐渍化程度   YZHCD
                1 WR
                镉   Cd
                汞   Hg
                砷   As_
                铜   Cu
                铅   Pb
                铬   Cr
                锌   Zn
                镍   Ni -->
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:2" style="width: 100%;">
                    &#12288;&#12288;指标：
                    <select id="index" style="width: 70%">
                        <option value="DXSW" ZhiBiaoType="0">地下水位</option>
                        <option value="YXTCHD" ZhiBiaoType="0">有效土层厚度</option>
                        <option value="TRYJZHL" ZhiBiaoType="0">土壤有机质含量</option>
                        <option value="TRSJD" ZhiBiaoType="0">土壤酸碱度（pH值）</option>
                        <option value="GGBZL" ZhiBiaoType="0">灌溉保证率</option>
                        <option value="PSTJ" ZhiBiaoType="0">排水条件</option>
                        <option value="DBYSLTD" ZhiBiaoType="0">地表岩石露头度</option>
                        <option value="ZACJDBSD" ZhiBiaoType="0">障碍层距地表深度</option>
                        <option value="YZHCD" ZhiBiaoType="0">盐渍化程度</option>
                        <option value="Cd" ZhiBiaoType="1">镉</option>
                        <option value="Hg" ZhiBiaoType="1">汞</option>
                        <option value="As_" ZhiBiaoType="1">砷</option>
                        <option value="Cu" ZhiBiaoType="1">铜</option>
                        <option value="Pb" ZhiBiaoType="1">铅</option>
                        <option value="Cr" ZhiBiaoType="1">铬</option>
                        <option value="Zn" ZhiBiaoType="1">锌</option>
                        <option value="Ni" ZhiBiaoType="1">镍</option>
                    </select>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:2" style="width: 100%;">
                    &#12288;像元大小：
                    <input type="text" id="outputPixelSize" value="0.11" style="width: 65%">
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', layoutPriority:2" style="width: 100%;">
                    &#12288;插值方式：
                    <select id="interpolationMethod" style="width: 67%">
                        <option value="反距离权重插值">反距离权重插值</option>
                        <option value="克里金插值">克里金插值</option>
                        <option value="样条函数插值">样条函数插值</option>
                    </select><br><br>
                    <div  style="width: 100%;display:inline" id="IdwCondition_idw" class="IdwCondition">
                        反距离权重插值
                    </div>
                    <div  style="width: 100%; display:none" id="IdwCondition_klj" class="IdwCondition">
                         &#12288;克里金方法：
                        <input type="radio" id="ordinaryKlj" checked="checked" name="kljType" class="kljType">普通克里金
                        <input type="radio" id="generalKlj" name="kljType" class="kljType">泛克里金
                        <br>
                        <br>
                         &#12288;半变异模型：
                        <select id="ordinaryKljFunctionType" class="KljFunctionType" style="width: 60%;display:inline;margin:10px 10px;">
                            <option value="Spherical #">球面函数</option>
                            <option value="Circular #">三角函数</option>
                            <option value="Expohential #">指数函数</option>
                            <option value="Gaussian #">高斯函数</option>
                            <option value="Linear #">线性函数</option>
                        </select>
                        <select id="generalKljFunctionType" class="KljFunctionType" style="width: 60%;display:none;margin:10px 10px">
                            <option value="LinearDrift #">与一次漂移函数成线性关系</option>
                            <option value="QuadraticDrift #">与二次漂移函数成线性关系</option>
                        </select>
                    </div>
                    <div style="width: 100%; display:none" id="IdwCondition_yt" class="IdwCondition">
                        样条函数类型：
                        <select id="ytFunctionType" style="width: 60%">
                            <option value="REGULARIZED">REGULARIZED</option>
                            <option value="TENSION">TENSION</option>
                        </select><br><br>
                        &#12288;权重值：&#12288;&#12288;<input type="text" id="idwYTWeight" value="0.1" style="width: 60%"><br><br>
                        &#12288;点数：&#12288;&#12288;&#12288;<input type="text" id="idwYtPointNumber" value="12" style="width: 60%"><br><br>
                    </div>
                    <div  style="width: 100%">
                        <input type="button" value="插值分析" id="testBtn" style="width: 100px; height: 30px; display: block;margin:10px 50%;" />
                    </div>
                </div>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
            <div id="mapDiv" style="height: 100%; width: 100%">
            </div>
            <div id="mapControlButtons">
                <button type="button" id="zoomIn">
                    <img src="Icons/ZoomInTool16.png" alt="tall" width="16" height="16" />
                </button>
                <button type="button" id="zoomOut">
                    <img src="Icons/ZoomOutTool16.png" alt="tall" width="16" height="16" />
                </button>
                <button type="button" id="pan">
                    <img src="Icons/PanTool16.png" alt="tall" width="16" height="16" />
                </button>
                <button type="button" id="zoomFull">
                    <img src="Icons/ZoomFullExtent16.png" alt="tall" width="16" height="16" />
                </button>
                <button type="button" id="preExtent">
                    <img src="Icons/GenericBlueLeftArrowLongTail16.png" alt="tall" width="16" height="16" />
                </button>
                <button type="button" id="nextExtent">
                    <img src="Icons/GenericBlueRightArrowLongTail16.png" alt="tall" width="16" height="16" />
                </button>
            </div>
            <div id="idwLegend" class="legend">
                <h3>插值分析图例</h3>
                <img src="Icons/color.png" alt="tall" width="20" height="100">
                <div id="legendTop">高：</div>
                <div id="legendBottom">低：</div>
            </div>
        </div>
    </div>
    <div id="operationMask">
        <div id="loading-mask">
            <div id="loading-center-mask">
                <div id="loading-center-absolute-mask">
                    <div class="object-mask" id="object_one_mask"></div>
                    <div class="object-mask" id="object_two_mask"></div>
                    <div class="object-mask" id="object_three_mask"></div>
                    <div class="object-mask" id="object_four_mask"></div>
                    <div class="object-mask" id="object_five_mask"></div>
                    <div class="object-mask" id="object_six_mask"></div>
                    <div class="object-mask" id="object_seven_mask"></div>
                    <div class="object-mask" id="object_eight_mask"></div>
                </div>
            </div>
        </div>
        <div id="maskTip"></div>
    </div>
</body>

</html>